<template>
    <div>
         <div class='image_text'>
             <h1>{{ okdata.title }}</h1>
             <p>
                 <span>发表时间:{{ okdata.add_time | solveTime }}</span>
                 <span>点击:{{ okdata.click }}次</span>
             </p>
         </div>
          <hr>
            <div class="thumbs">
              <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
              <div class='text' v-html="okdata.content"></div>  
                </div>
                <comment-lab :id="id"></comment-lab>
            </div>
          
    
</template>

<script>
import comment from '../../components/comment.vue'
    export default{
        data () {
            return {
                okdata:[],
                id:this.$route.params.id,
                list:[]
            }
        },
        created() {
            this.showdata()
            this.showimg()
        },
        methods: {
            showdata(){
                this.$http.get('api/getimageInfo/'+this.id).then(result=>{
                          if(result.body.status===0){   
                              this.okdata=result.body.message[0]                           
                          }
                })
            },
            showimg(){
                this.$http.get('api/getthumimages/'+this.id).then(result=>{
                         if(result.body.status===0){   
                                     result.body.message.forEach(item => {
                                         item.w=600
                                         item.h=400
                                         item.src='http://pic1.win4000.com/mobile/2018-07-09/5b43027d4906c_250_350.jpg'
                                     });
                              this.list=result.body.message                           
                          }

            })
        }
    },
    components: {
        'comment-lab':comment
    }
    }
</script>

<style lang="less" scoped>
.image_text{
    padding: 20px 0px 0px 0px; 
    h1{
        text-align: center;
        font-size: 16px;
        color: skyblue;
        padding: 0 0 10px 0;
    }
    p{
        display: flex;
        justify-content: space-between;
        span{
              font-size: 13px;
              color: gray;
        }
    }
  
}

  .thumbs{
      .text{
       line-height: 30px;   
       font-size: 14px;
      }
       img{
           padding: 10px;
           width:30%;
           
       }
        margin: 10px 0px;
        box-shadow: 0 0 8px #999;
        
      
        
    }
</style>
